<template>
  <div>
    <el-tabs type="border-card">
  <el-tab-pane label="新增计费项目">
    <div class="box">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
    <div class="first">
  <el-form-item label="计费项目名称" prop="name" style="width:700px;">
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item>
  <el-form-item label="项目优先级" prop="region" style="width:700px;">
    <el-input v-model="ruleForm.region"></el-input>
  </el-form-item>
  </div>
  <div class="second">
  <el-form-item label="项目用量/时长" prop="date1" style="width:700px;">
    <el-input v-model="ruleForm.date1"></el-input>
  </el-form-item>
  <el-form-item label="项目价格" prop="date2" style="width:700px;">
    <el-input v-model="ruleForm.date2"></el-input>
  </el-form-item>
  </div>
  <div class="third">
  <el-form-item label="通知状态" prop="desc">
    <el-select v-model="ruleForm.desc" placeholder="请选择状态" style="width:550px;">
      <el-option label="已通知" value="1"></el-option>
      <el-option label="未通知" value="2"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="计费目录" prop="index">
    <el-select v-model="ruleForm.index" placeholder="请选择状态" style="width:550px;">
      <el-option label="电费目录" :value="7"></el-option>
      <el-option label="水费固定月目录" value="8"></el-option>
      <el-option label="水费按量目录" value="9"></el-option>
      <el-option label="天然气目录" value="10"></el-option>
      <el-option label="物业费目录" value="11"></el-option>
      <el-option label="宽带费目录" value="12"></el-option>
    </el-select>
  </el-form-item>
  </div>
  <el-form-item label="通知内容" prop="content">
              <vue-ueditor-wrap 
                v-model="ruleForm.content" 
                :config="ueditorConfig" 
                style="width: 95%"
              ></vue-ueditor-wrap>
            </el-form-item>
    </el-form>
    <div class="anniu">
        <el-button type="primary" icon="el-icon-refresh-left" style="margin-left:10px;" @click="back">返回</el-button>
        <el-button type="primary" icon="el-icon-document" style="margin-top:10px;" @click="keep">保存</el-button>
        <el-button type="primary" icon="el-icon-position" style="margin-top:10px;" @click="keep">提交</el-button>
    </div>
    </div>
  </el-tab-pane>
  
</el-tabs>

  </div>
</template>

<script>
import VueUeditorWrap from 'vue-ueditor-wrap'
export default {
    components: {
    VueUeditorWrap // 注册组件
  },
    data() {
      return {
        dialogVisible:false,
        ruleForm: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          
          
          content:'',
          desc: '2',
          index:'',
        },
        ueditorConfig: {
        // UEditor 资源路径（必须正确配置）
        UEDITOR_HOME_URL: '/ueditor/',
        // 编辑器初始化宽度
        initialFrameWidth: '100%',
        // 编辑器初始化高度
        initialFrameHeight: 300,
        // 工具栏配置（按需调整）
        toolbars: [
          ['fullscreen', 'source', 'undo', 'redo', '|', 
           'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 
           'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|', 
           'rowspacingtop', 'rowspacingbottom', 'lineheight', '|', 
           'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|', 
           'directionalityltr', 'directionalityrtl', 'indent', '|', 
           'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 
           'touppercase', 'tolowercase', '|', 
           'link', 'unlink', 'anchor', '|', 
           'imagenone', 'imageleft', 'imageright', 'imagecenter', '|', 
           'simpleupload', 'insertimage', 'emotion', 'scrawl', 'insertvideo', 'music', 'attachment', 'map', 'gmap', 'insertframe', 'insertcode', 'webapp', 'pagebreak', 'template', 'background', '|', 
           'horizontal', 'date', 'time', 'spechars', 'snapscreen', 'wordimage', '|', 
           'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', 'charts', '|', 
           'print', 'preview', 'searchreplace', 'drafts']
        ]
      },
        rules: {
          name: [
            { required: true, message: '计费项目不能为空', trigger: 'blur' },
            
          ],
          region: [
            { required: true, message: '项目级别不能为空', trigger: 'blur' }
          ],
          date1: [
            {  required: true, message: '项目用量/时长不能为空', trigger: 'blur' }
          ],
          date2: [
            {  required: true, message: '项目价格不能为空', trigger: 'blur' }
          ],
          
          
          desc: [
            { required: true, message: '通知状态不能为空', trigger: 'change' }
          ],
           index: [
            { required: true, message: '计费目录不能为空', trigger: 'change' }
          ],
         
        },
        
      };
    },
    methods:{
     
        back(){
            this.$router.replace("payType")
        },
        keep(){
     this.$refs.ruleForm.validate(async (isValid) => {
    // isValid 为 true 表示所有表单项都符合规则，false 表示有错误
    if (isValid) {
      // 第二步：验证通过，再弹确认弹窗
      this.$confirm('确认保存计费信息?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(async () => {
        // 第三步：用户点击“确定”，调用接口提交数据
        let res = await this.$axios.post("http://community.byesame.com/cost/addCostData", {
          payname: this.ruleForm.name,
          paylevel: this.ruleForm.region,
          paynum: this.ruleForm.date1,
          paymoney: this.ruleForm.date2,
          paystatus: this.ruleForm.desc,
          c_id: this.ruleForm.index,
          paycontent: this.ruleForm.content,
          coststatus: this.ruleForm.index,
          token: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MSwidXNlcm5hbWUiOiJhZG1pbiIsImVtYWlsIjoiMjQ1MzMxNzM1N0BxcS5jb20iLCJoZWFkIjoiMjAyNTEwMjcxNTE4NDA4MzUxMTQxLmpwZyIsInR5cGUiOiIxIiwiaWF0IjoxNzYxNjk4ODM2LCJleHAiOjE3NjE3ODUyMzZ9.q51a5NZjbxdj0WIbZUOYAaqBM1JqcyuzmpwzsoLIAeo"
        });
        console.log(res);
        this.$message({
          type: 'success',
          message: '计费项目新增成功'
        });
        this.$router.replace("payType");
      })
    } 
  });
    },
    },
    created(){
      
    }
}
</script>

<style scoped>
.box{
    width: 95%;
    margin: 0 auto;
    position: relative;
}
.first{
    display: flex;
}
.second{
    display: flex;
}
.third{
    display: flex;
}
.anniu{
    width: 80px;
    position: absolute;
    top: 50px;
    right:-50px;
    
}
</style>